import Vue from "vue";
import loading from "@components/iv-loading/src/main.vue";
const loadClass = Vue.extend(loading);

//定义一个名为loading的指令
export default {
  /**
   * 只调用一次，在指令第一次绑定到元素调用，可以在这里做一些初始化的设置
   * @param {*} el 指令要绑定的元素
   * @param {*} binging 指令传入的信息，包括{name:'指令名称',value:'指令绑定的值',arg:'指令形参'}
   */
  bind: (el, binging) => {
    const instance = new loadClass({
      el: document.createElement("div"),
      data: {
        visible: binging.value.visible,
        text: binging.value.text
      }
    });
    el.appendChild(instance.$el);
    el.instance = instance;
  },

  /**
   * 所在组件的vnode更新时调用
   * @param {*} el
   * @param {*} bingding
   */
  update: (el, bingding) => {
    //通过对比值的变化，判断loading是否显示
    if (bingding.oldValue !== bingding.value) {
      el.instance.visible = bingding.value;
    }
  },

  /**
   * 只调用一次，在指令与元素解绑时调用
   * @param {*} el
   * @param {*} bingding
   */
  unbind: el => {
    const mask = el.instance.$el;
    if (mask.parentNode) {
      mask.parentNode.removeChild(mask);
    }
    el.instance.$destroy();
    el.instance = undefined;
  }
};
